<template>
  <grimm-page type="button-view" title="TabBar">
    <template slot="content">
      <div disabled class="grimm-tab-box">
        <h1 class="example-page-title">样式1</h1>
        <grimm-tab-bar
          v-model="selectedLabel"
          :data="dataList"
          @change="changeHandler"
          show-slider
        ></grimm-tab-bar>
        <div class="showValue">当前选中：{{ showValue }}</div>
      </div>

      <div disabled class="grimm-tab-box">
        <h1 class="example-page-title">样式2</h1>
        <grimm-tab-bar
          v-model="selectedLabel1"
          :data="dataList1"
          @change="changeHandler1"
        ></grimm-tab-bar>
        <div class="showValue">当前选中：{{ showValue1 }}</div>
      </div>
      <div disabled class="grimm-tab-box">
        <h1 class="example-page-title">样式3</h1>
        <grimm-tab-bar
          v-model="selectedLabel2"
          :data="dataList1"
          @change="changeHandler2"
          :showTitle="false"
        ></grimm-tab-bar>
        <div class="showValue">当前选中：{{ showValue2 }}</div>
      </div>
      <div disabled class="grimm-tab-box">
        <h1 class="example-page-title">样式4</h1>
        <grimm-tab-bar
          v-model="selectedLabel3"
          :data="dataList2"
          @change="changeHandler3"
          showOneLevelCard
        ></grimm-tab-bar>
        <div class="showValue">当前选中：{{ showValue3 }}</div>
      </div>
      <div disabled class="grimm-tab-box">
        <h1 class="example-page-title">样式5</h1>
        <grimm-tab-bar
          v-model="selectedLabel4"
          :data="dataList2"
          @change="changeHandler4"
          showSecondLevelCard
        ></grimm-tab-bar>
        <div class="showValue">当前选中：{{ showValue4 }}</div>
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  data() {
    return {
      checked: 1,
      optionValue: {
        label: 'Option Checkbox',
        value: '1',
      },
      selectedLabel: 'tab2',
      selectedLabel1: 'tab1',
      selectedLabel2: 'tab3',
      selectedLabel3: 'tab1',
      selectedLabel4: 'tab2',
      showValue: 'label - - 2Jerry | value - tab2',
      showValue1: 'label - 1Jerry | value - tab1',
      showValue2: 'label - 3Jerry | value - tab3',
      showValue3: 'label - 1Jerry | value - tab1',
      showValue4: 'label - 2Jerry | value - tab2',
      dataList: [
        { label: '1Jerry', value: 'tab1' },
        { label: '2Jerry', value: 'tab2' },
        { label: '3Jerry', value: 'tab3' },
        { label: '4Jerry', value: 'tab4' },
        { label: '5Jerry', value: 'tab5' },
        { label: '6Jerry', value: 'tab6' },
        { label: '7Jerry', value: 'tab7' },
        { label: '8Jerry', value: 'tab8' },
      ],
      dataList1: [
        { label: '1Jerry', value: 'tab1', icon: 'iconfont calendar' },
        { label: '2Jerry', value: 'tab2', icon: 'iconfont message' },
        { label: '3Jerry', value: 'tab3', icon: 'iconfont user-full' },
        { label: '4Jerry', value: 'tab4', icon: 'iconfont phone' },
        { label: '5Jerry', value: 'tab5', icon: 'iconfont calculate' },
      ],
      dataList2: [
        { label: '1Jerry', value: 'tab1' },
        { label: '2Jerry', value: 'tab2' },
        { label: '3Jerry', value: 'tab3' },
      ],
    };
  },
  created() {
    this.scrollData = this.dataList[this.selectedLabel];
  },
  methods: {
    changeHandler(value, label) {
      this.showValue = `label - ${label} | value - ${value}`;
    },
    changeHandler1(value, label) {
      this.showValue1 = `label - ${label} | value - ${value}`;
    },
    changeHandler2(value, label) {
      this.showValue2 = `label - ${label} | value - ${value}`;
    },
    changeHandler3(value, label) {
      this.showValue3 = `label - ${label} | value - ${value}`;
    },
    changeHandler4(value, label) {
      this.showValue4 = `label - ${label} | value - ${value}`;
    },
  },
  components: {
    GrimmPage,
  },
};
</script>
<style>
.grimm-tab-box {
  margin: 10px 0 30px;
}
.showValue {
  margin-top: 15px;
}
</style>
